<template>
  <el-col>
    <el-col :span="24" class="detail-title">
      <i class="el-icon-info"></i>
      <span>{{ title }}</span>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-arrow-left"
        class="action" @click="goBack"
        >返回</el-button
      >
    </el-col>
    <el-col :span="24">
      <slot name="main-detail"></slot>
    </el-col>
    <el-col :span="24" class="detail-tab" v-if="tabList.length > 0">
      <el-tabs
        type="border-card"
        v-model="hightLightTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.name"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <slot :name="item.name"></slot>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-col>
</template>
<script>
export default {
  props: {
    title: String,
    tabList: {
      type: Array,
      default: ()=>[]
    },
    currentTab: String
  },
  computed: {
    hightLightTab: {
      get() {
        if(this.tabList.length == 0) return ''
        return this.currentTab || this.tabList[0].name;
      },
      set(v) {},
    },
  },
  methods: {
    goBack(){
      let _self = this
      // const obj = { path: _self.$route.path };
      // this.$tab.closeOpenPage(obj);
      // console.log(_self.$route,333333333);
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
</style>